<template>
  <view>
    <view class="box">
      <input
        type="text"
        v-model="search"
        placeholder="暂只支持双色球,大乐透单注或复式"
        @confirm="add()"
      />
      <span @click="del()">❌</span>
    </view>
    <view class="back">
      <a href="#">点我查看查询操作步骤</a>

      <view class="box1" v-if="status">
        <p>彩票种类: 双色球</p>
        <p>彩票期号: 22092</p>
        <p>开奖时间: 2022-08-11</p>
        <p>中奖号码: 07,10,16,20,21,27,11</p>
        <p>是否中奖: 未中奖</p>
      </view>
      <span v-if="status" @click="edit()">关闭</span>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      status: false,
    };
  },
 
  methods: {
    add() {
      this.status = true;
    },
    edit() {
      this.status = false;
    },
    del() {
      this.search = "";
    },
  },
};
</script>

<style lang="less">
input {
  width: 80%;
  height: 40px;
  background-color: white;
  border-radius: 10px;
  padding-left: 10px;
  display: inline-block;
}
.box {
  width: 100%;
  height: 50px;
  background-color: gray;
  display: flex;
  justify-content: space-around;
  align-items: center;

  span {
    width: 50px;
    height: 50px;
    // border: 1px solid red;
	line-height: 50px;
	text-align: center;
  }
}
a {
  color: blue;
}
.box1 {
  margin-top: 50px;
  width: 90%;
  height: 350px;
  margin-left: 20px;
  background-color: #ff838e;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: white;
}
.back {
  width: 100%;
  height: 1200px;
  background-color: #ff9da4;
  position: absolute;
  span {
    position: relative;
    left: 334px;
    bottom: 330px;
  }
}
</style>
